<template>
    <div>
        <el-upload
            :action="action"
            :headers="headers"
            :multiple="multiple"
            :with-credentials="false"
            :data="data"
            :show-file-list="showFileList"
            :drag="false"
            :accept="accept"
            :on-preview="onPreview"
            :on-remove="onRemove"
            :on-success="onSuccess"
            :before-upload="beforeUpload"
            :on-exceed="onExceed"
            list-type="text"
            :auto-upload="autoUpload"
            :file-list="fileList"
            :disabled="disabled"
            :limit="limit"
            :on-change="change"
            ref="upload"
        >
            <slot v-if="$slots.default"></slot>
            <el-button v-if="!disabled && !$slots.default" slot="default" type="primary">{{title}}</el-button>
        </el-upload>
    </div>
</template>

<script>
/* eslint-disable */
export default {
    name: "el-upload-file",
    props: {
        uploadClear:{
            type:Boolean,
            default:false
        },
        showFileList:{
            type:Boolean,
            default:true
        },
        disabled: {
            type: Boolean,
            default: false
        },
        multiple: {
            type: Boolean,
            default: true
        },
        accept: {
            type: String,
            default: "*"
        },
        limit: {
            type: Number,
            default: 1
        },
        value: {
            type: Array,
            default: () => []
        },
		title: {
		    type: String,
		    default: "选择文件"
		},
        autoUpload:{
            type:Boolean,
            default:true
        }
    },
    model: {
        prop: "value",
        event: "change"
    },
    watch: {
        value() {
            if (this.fileList.length !== this.value.length) {
                this.fileList = this.value;
                return;
            }
            if (this.fileList.length === this.value.length) {
                const result = this.fileList.some((item, index) => {
                    return item.url !== this.value[index].url;
                });
                if (result) {
                    this.fileList = this.value;
                    return;
                }
            }
        }
    },
    mounted() {
        this.fileList = this.value;
    },
    data() {
        return {
            action: "/admin/ajax/upload",
            data: {},
            headers: { batoken: this.$store.state.token },
            fileList: [],
            previewUrl: "",
            previewShow: false
        };
    },
    methods: {
        onPreview(file) {
            this.previewUrl = file.url;
            this.previewShow = true;
        },
        onRemove(file, fileList) {
            this.fileList = fileList;
            this.$emit(
                "change",
                fileList.map(item => {
                    if (item.response) {
                        return {
                            url:
                                "https://zdcloud.zxkjnc.com" +
                                item.response.data.file.url,
                            name: item.name
                        };
                    } else {
                        return {
                            url: item.url,
                            name: item.name
                        };
                    }
                })
            );
        },
        change(file,fileList){
            if(this.multiple){
                this.$emit('change',fileList)
            }else{
                this.$emit('change',file)
            }
            if(this.uploadClear){
                setTimeout(() => {
                    this.$refs.upload.clearFiles()
                }, 1000);
            }
        },
        onSuccess(response, file, fileList) {
            if (response.code === 1) {
                this.$message.success(response.msg);
                this.fileList = fileList;
                this.$emit(
                    "change",
                    fileList.map(item => {
                        if (item.response) {
                            return {
                                url:
                                    "https://zdcloud.zxkjnc.com" +
                                    item.response.data.file.url,
                                name: item.name
                            };
                        } else {
                            return {
                                url: item.url,
                                name: item.name
                            };
                        }
                    })
                );
            } else {
                this.$message.error(response.msg);
            }
            if(this.uploadClear){
                setTimeout(() => {
                    this.$refs.upload.clearFiles()
                }, 1000);
            }
        },
        beforeUpload(file) {
            const isAllowSize = file.size / 1024 / 1024 < 4;
            const acceptArr = this.accept.split(",");
            const fileNameSplit = file.name.split(".");
            const suffix = "." + fileNameSplit[fileNameSplit.length - 1];
            const isAllowType = this.accept=='*'?true:acceptArr.indexOf(suffix) >= 0;
            if (!isAllowSize) {
                this.$message.error("上传文件大小不能超过4M!");
            }
            if (!isAllowType) {
                this.$message.error(`只能上传${acceptArr.join("/")}格式`);
            }
            return isAllowSize && isAllowType;
        },
        onExceed(files, fileList) {
            this.$message.error("上传文件数量不能超过" + this.limit + "个");
        }
    }
};
</script>